for (let i = 0; i < document.querySelectorAll('a').length; i++) {
    document.querySelectorAll('a')[i].addEventListener('click', function (e) {
        e.preventDefault()
    })
}
// 轮播元素数组
let bannerarrimg2 = [
    {
        bgcImg2: './imgs/banner1.png',
        bottomImg2: '50.5px',
        widthImg2: '300px',
        leftImg2: '400px',
        srcImg2: './imgs/banner1Phone.png'
    },
    {
        bgcImg2: './imgs/banner2.png',
        bottomImg2: '0px',
        widthImg2: '600px',
        leftImg2: '360px',
        srcImg2: './imgs/banner2Phone.png'
    },
    {
        bgcImg2: './imgs/banner3.png',
        bottomImg2: '0px',
        widthImg2: '580px',
        leftImg2: '700px',
        srcImg2: './imgs/banner3Phone.png'
    },
    {
        bgcImg2: './imgs/banner4.png',
        bottomImg2: '20px',
        widthImg2: '350px',
        leftImg2: '360px',
        srcImg2: './imgs/banner4Phone.png'
    }
]
const bannerarrimg3 = [
    {
        srcImg3: 'http://tg-vision.com/d/file/indexlink/focus/201306/e92807f2bcc6f6e4fc92a2b07ef3eb26.png',
        bottomImg3: '20px',
        widthImg3: '800px',
        leftImg3: '460px'
    },
    {
        bottomImg3: '0px',
        widthImg3: '880px',
        leftImg3: '300px',
        srcImg3: 'http://tg-vision.com/d/file/indexlink/focus/201406/7b0a6341b043c3b52105faa43852f46a.png'
    },
    {
        bottomImg3: '240px',
        widthImg3: '150px',
        leftImg3: '500px',
        srcImg3: './imgs/banner3Phone2.png'
    },
    {
        bottomImg3: '0px',
        widthImg3: '880px',
        leftImg3: '300px',
        srcImg3: 'http://tg-vision.com/d/file/indexlink/focus/201306/dc0e4583d9af6915d306cabb9ac6df64.png'
    }
]
// 索引
let index = 0
// 定时器控制
let timer1 = setInterval(function () {
    document.querySelector('.jltu2').click()
}, 3000)
// 轮播填充函数
function tianchon() {
    const banner = document.querySelector('.banner1');
    banner.style.backgroundImage = `url(${bannerarrimg2[index].bgcImg2})`;
    
    document.querySelector('.img2').style.bottom = bannerarrimg2[index].bottomImg2;
    document.querySelector('.img2').style.width = bannerarrimg2[index].widthImg2;
    document.querySelector('.img2').style.left = bannerarrimg2[index].leftImg2;
    document.querySelector('.img2').src = bannerarrimg2[index].srcImg2;

    document.querySelector('.img3').style.bottom = bannerarrimg3[index].bottomImg3;
    document.querySelector('.img3').style.width = bannerarrimg3[index].widthImg3;
    document.querySelector('.img3').style.left = bannerarrimg3[index].leftImg3;
    document.querySelector('.img3').src = bannerarrimg3[index].srcImg3;
}

// 顶端导航栏
// 鼠标事件
document.querySelector('nav div img:nth-child(1)').addEventListener('mouseenter', function () {
    this.src = 'http://tg-vision.com/skin/tg2013/images/searchon.gif'
})
document.querySelector('nav div img:nth-child(1)').addEventListener('mouseleave', function () {
    this.src = 'http://tg-vision.com/skin/tg2013/images/search.gif'
})
// 点击事件
let a1click = false
document.querySelector('nav div img:nth-child(1)').addEventListener('click', function () {
    if (!a1click) document.querySelector('.a1').style.opacity = '1'
    else document.querySelector('.a1').style.opacity = '0'
    a1click = !a1click
})
// 轮播图按钮
//鼠标事件
document.querySelector('.banner').addEventListener('mouseenter', function () {
    document.querySelector('.jltu1').style.transform = `translateY(-72px)`
    document.querySelector('.jltu2').style.transform = `translateY(-72px)`
    //关闭定时器
    clearInterval(timer1)


})
document.querySelector('.banner').addEventListener('mouseleave', function () {
    document.querySelector('.jltu1').style.transform = `translateY(-72px) translateX(-64px)`
    document.querySelector('.jltu2').style.transform = `translateY(-72px) translateX(64px)`
    // 重新开启定时器
    clearInterval(timer1)
    timer1 = setInterval(function () {
        document.querySelector('.jltu2').click()
    }, 3000)
})



document.querySelector('.jltu1').addEventListener('mouseenter', function () {
    // document.querySelector('.jltu1').style.backgroundPosition = ` 0px -144px`
    document.querySelector('.jltu1').style.transition = `all 1.5s`
    // document.querySelector('.jltu2').style.backgroundPosition = ` -68px -144px`
    document.querySelector('.jltu2').style.transition = `all 1.5s`

})
document.querySelector('.jltu1').addEventListener('mouseleave', function () {
    document.querySelector('.jltu1').style.backgroundPosition = ` 0px 0px`
    document.querySelector('.jltu2').style.backgroundPosition = ` -68px 0px`
})
document.querySelector('.jltu2').addEventListener('mouseenter', function () {
    document.querySelector('.jltu1').style.backgroundPosition = ` 0px -144px`
    document.querySelector('.jltu1').style.transition = `all 1.5s`
    document.querySelector('.jltu2').style.backgroundPosition = ` -68px -144px`
    document.querySelector('.jltu2').style.transition = `all 1.5s`

})
document.querySelector('.jltu2').addEventListener('mouseleave', function () {
    document.querySelector('.jltu1').style.backgroundPosition = ` 0px 0px`
    document.querySelector('.jltu2').style.backgroundPosition = ` -68px 0px`
})

document.querySelector('.jltu1').addEventListener('click', function () {
    index--
    if (index === -1) {
        index = 3
    }
    document.querySelector('.banner1').style.backgroundImage = `url(${bannerarrimg2[index].bgcImg2})`
    document.querySelector('.img3').style.left = '95%'
    document.querySelector('.img3').style.transition = ` all 0.2s`
    document.querySelector('.img2').style.left = '100%'
    document.querySelector('.img2').style.transition = ` all 0.8s`
    tianchon()
})
document.querySelector('.jltu2').addEventListener('click', function () {
    index++
    if (index === bannerarrimg2.length) {
        index = 0
    }
    document.querySelector('.banner1').style.backgroundImage = `url(${bannerarrimg2[index].bgcImg2})`
    document.querySelector('.img3').style.left = bannerarrimg3[index].leftImg3
    document.querySelector('.img3').style.transition = ` all 0.8s`
    document.querySelector('.img2').style.left = bannerarrimg2[index].leftImg2
    document.querySelector('.img2').style.transition = ` all 0.2s`

    tianchon()
})

//display 消失隐藏
const lisdiv3 = document.querySelectorAll('.div3 ul li')
for (let i = 0; i < lisdiv3.length; i++) {
    lisdiv3[i].addEventListener('mouseenter', function () {
        this.querySelector('.div5').style.display = 'block'
    })
    lisdiv3[i].addEventListener('mouseleave', function () {
        this.querySelector('.div5').style.display = 'none'
    })
}






// 按钮切换更改图片
const div2sA = document.querySelectorAll('.div2 div')
const div3s = document.querySelectorAll('.div3')
const div4s = document.querySelectorAll('.div4')
const tabcontexts = document.querySelectorAll('.tabcontext')

let colorActiveindex = 0

for (let i = 0; i < div2sA.length; i++) {
    div2sA[i].addEventListener('click', function () {
        for (let j = 0; j < div2sA.length; j++) {
            div2sA[j].classList.remove('colorActive')
            div3s[j].classList.add('div3section-display')
            tabcontexts[j].classList.add('div3section-display')
        }
        this.classList.add('colorActive')
        div3s[i].classList.remove('div3section-display')
        tabcontexts[i].classList.remove('div3section-display')

        colorActiveindex = i
        console.log(colorActiveindex)

        const div4sDiv = div4s[colorActiveindex].querySelectorAll('div')
        const divList = div3s[colorActiveindex]
        let divclick = 1
        for (let i = 0; i < div4sDiv.length; i++) {
            if (i === 0) {
                div4sDiv[0].addEventListener('click', function () {
                    if (divclick > 1) {
                        divclick--
                        anniubse()
                    }
                    if (divclick === 0) {
                        divclick = 0
                        anniubse()
                    }
                })
            } else if (i === div4sDiv.length - 1) {
                div4sDiv[div4sDiv.length - 1].addEventListener('click', function () {
                    if (divclick < div4sDiv.length - 2) {
                        divclick++
                        anniubse()
                    }
                    if (divclick === div4sDiv.length - 1) {
                        divclick = div4sDiv.length - 2
                        anniubse()
                    }
                })
            } else {
                div4sDiv[i].addEventListener('click', function () {
                    divclick = i
                    anniubse()
                })
            }
        }


        function anniubse() {
            console.log(div4s[colorActiveindex].querySelector('.colorActive').classList)
            div4s[colorActiveindex].querySelector('.colorActive').classList.remove('colorActive')
            div4sDiv[divclick].classList.add('colorActive')
            for (let i = 0; i < divList.querySelectorAll('.div-list').length; i++) {
                divList.querySelectorAll('.div-list')[i].classList.add('ul-display')
                if (divclick - 1 === i) {
                    divList.querySelectorAll('.div-list')[i].classList.remove('ul-display')
                }

            }
        }
    })
}
const div4sDiv = div4s[colorActiveindex].querySelectorAll('div')
const divList = div3s[colorActiveindex]
let divclick = 1
for (let i = 0; i < div4sDiv.length; i++) {
    if (i === 0) {
        div4sDiv[0].addEventListener('click', function () {
            if (divclick > 1) {
                divclick--
                anniubse()
            }
            if (divclick === 0) {
                divclick = 0
                anniubse()
            }
        })
    } else if (i === div4sDiv.length - 1) {
        div4sDiv[div4sDiv.length - 1].addEventListener('click', function () {
            if (divclick < div4sDiv.length - 2) {
                divclick++
                anniubse()
            }
            if (divclick === div4sDiv.length - 1) {
                divclick = div4sDiv.length - 2
                anniubse()
            }
        })
    } else {
        div4sDiv[i].addEventListener('click', function () {
            divclick = i
            anniubse()
        })
    }
}


function anniubse() {
    console.log(div4s[colorActiveindex].querySelector('.colorActive').classList)
    div4s[colorActiveindex].querySelector('.colorActive').classList.remove('colorActive')
    div4sDiv[divclick].classList.add('colorActive')
    for (let i = 0; i < divList.querySelectorAll('.div-list').length; i++) {
        divList.querySelectorAll('.div-list')[i].classList.add('ul-display')
        if (divclick - 1 === i) {
            divList.querySelectorAll('.div-list')[i].classList.remove('ul-display')
        }

    }

    // divList.querySelectorAll('div')[divclick-1].classList.remove('ul-display')


}

// 添加图片懒加载
document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('img[data-src]');
    
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });

    images.forEach(img => imageObserver.observe(img));
});

// 修改轮播图初始化部分
document.addEventListener('DOMContentLoaded', function() {
    // 预加载背景图片
    const preloadImages = [
        './imgs/banner1.png',
        './imgs/banner2.png',
        './imgs/banner3.png',
        './imgs/banner4.png'
    ];
    
    preloadImages.forEach(src => {
        const img = new Image();
        img.src = src;
    });

    // 设置初始背景
    const banner = document.querySelector('.banner1');
    banner.style.backgroundImage = `url(${bannerarrimg2[0].bgcImg2})`;
    
    // 确保图片加载完成后再显示
    const img2 = document.querySelector('.img2');
    const img3 = document.querySelector('.img3');
    
    img2.style.opacity = '0';
    img3.style.opacity = '0';
    
    Promise.all([
        new Promise(resolve => {
            img2.onload = resolve;
            img2.src = bannerarrimg2[0].srcImg2;
        }),
        new Promise(resolve => {
            img3.onload = resolve;
            img3.src = bannerarrimg3[0].srcImg3;
        })
    ]).then(() => {
        img2.style.opacity = '1';
        img3.style.opacity = '1';
        tianchon(); // 调用原有的填充函数
    });
});

// 修改搜索按钮相关代码
document.addEventListener('DOMContentLoaded', function() {
    const searchBtn = document.querySelector('nav div img:nth-child(1)');
    const searchInput = document.querySelector('.a1');
    let isSearchOpen = false;

    // 搜索按钮鼠标事件
    searchBtn.addEventListener('mouseenter', function() {
        this.src = 'http://tg-vision.com/skin/tg2013/images/searchon.gif';
    });

    searchBtn.addEventListener('mouseleave', function() {
        this.src = 'http://tg-vision.com/skin/tg2013/images/search.gif';
    });

    // 搜索按钮点击事件
    searchBtn.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认行为
        e.stopPropagation(); // 阻止事件冒泡
        
        isSearchOpen = !isSearchOpen;
        searchInput.style.opacity = isSearchOpen ? '1' : '0';
        
        if (isSearchOpen) {
            searchInput.querySelector('input').focus();
        }
    });

    // 点击页面其他地方关闭搜索框
    document.addEventListener('click', function(e) {
        if (isSearchOpen && !searchInput.contains(e.target) && e.target !== searchBtn) {
            isSearchOpen = false;
            searchInput.style.opacity = '0';
        }
    });

    // 阻止搜索框点击事件冒泡
    searchInput.addEventListener('click', function(e) {
        e.stopPropagation();
    });
});














